import React, {Component} from 'react';
import {Row, Col, Form, Table, Breadcrumb, Icon, Steps, Button, Input, Radio, Pagination, Modal} from 'antd';
import '../css/orderDetail.css';
import moment from 'moment';
import {order} from "../value";
import app from '../app';
import edit from '../image/edit.png';

const Step = Steps.Step;
const FormItem = Form.Item;

class orderDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            type: 0,
            pagination: {
                current: 1
            },
            data: {
                user_nickname: '陈晓雯',
                order_paymentMethod: '1',
                order_status: '1',
                order_createtime: '2019-01-24 12:12:23',
                order_payment: '2019-01-24 12:12:23',
                order_deliver: '2019-01-24 12:12:23',
                order_receipt: '2019-01-24 12:12:23',
                order_evaluate: '2019-01-24 12:12:23',
                order_remark: '客户备注',
                order_shopRemark: '商家备注',
                order_totalPrice: '200.00',
                order_nickname: '陈晓雯',
                order_phone: '15626653487',
                order_province: '广东省',
                order_city: '佛山市',
                order_area: '南海区',
                order_address: '瀚天科技城B1区3号楼509-4室',
                order_afterTotalPrice: '180.00',
                order_couponPrice: '10.00',
                order_discountPrice: '1.00',
                order_collagePrice: '9.00',
            },
            goodsList: [],
        }
    };

    columns = [
        {
            title: '商品编号',
            dataIndex: 'goods_code'
        },
        {
            title: '商品名称',
            dataIndex: 'goods_name'
        },
        {
            title: '商品属性值',
            dataIndex: 'goods_sku_record'
        },
        {
            title: '单价',
            dataIndex: 'order_goods_price'
        },
        {
            title: '修改后的单价',
            dataIndex: 'order_goods_afterPrice'
        },
        {
            title: '数量',
            dataIndex: 'order_goods_count'
        },
        {
            title: '修改后的数量',
            dataIndex: 'order_goods_afterCount'
        },
        {
            title: '修改后的总价',
            dataIndex: 'order_goods_afterAllPrice'
        }
    ];
    formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 12},
    };

    render() {
        const {
            user_nickname,
            order_paymentMethod,
            order_status,
            order_createtime,
            order_payment,
            order_deliver,
            order_receipt,
            order_evaluate,
            order_remark,
            order_shopRemark,
            order_totalPrice,
            order_nickname,
            order_phone,
            order_province,
            order_city,
            order_area,
            order_address,
            order_afterTotalPrice,
            order_couponPrice,
            order_discountPrice,
            order_collagePrice,
            order_id
        } = this.state.data;
        const goodsList=this.state.goodsList;
        let text = '';
        switch (order_status) {
            case '1':
                text = '待支付';
                break;
            case '2':
                text = '待接单';
                break;
            case '3':
                text = '已接单';
                break;
            case '4':
                text = '待发货';
                break;
            case '5':
                text = '已发货';
                break;
            case '6':
                text = '已完成';
                break;
            case '7':
                text = '已取消';
                break;
            default:
                text = '未知';
                break;
        }
        let payMethodText = '';
        switch (order_paymentMethod) {
            case '1':
                payMethodText = '微信';
                break;
            case '2':
                payMethodText = '现金支付';
                break;
        }
        const {getFieldDecorator} = this.props.form;
        return (
            <div style={{fontFamily: 'PingFang SC Regular, PingFang SC', background: '#f5f5f5'}}>
                <div className="pageTitle" style={{background: '#fff'}}>
                    订单管理/订单详情
                </div>
                <div style={{background: '#fff'}}>
                    <div style={{paddingBottom: '15px', paddingTop: '20px'}}>
                        <Row style={{fontSize: '18px', color: '#272727'}}>
                            <Col span={12}>
                                <Icon type="team" style={{color: '#009dff', fontSize: '22px'}}></Icon>
                                <span
                                    style={{
                                        marginLeft: '20px',
                                        fontWeight: 'bold'
                                    }}>订单号：{order_id}</span>
                            </Col>

                        </Row>
                        <Row style={{marginTop: '20px', fontSize: '14px'}}>
                            <Col offset={1} span={5}>用户名：{user_nickname}</Col>
                            <Col span={6}>支付方式：{payMethodText}</Col>
                            <Col span={6}>发货方式：{this.state.data.output_logistics}</Col>
                            <Col span={6}>状态：<span
                                style={{marginLeft: '20px'}}>{text}</span></Col>
                        </Row>
                        <Row style={{marginTop: '10px', fontSize: '14px'}}>
                            <Col offset={1} span={5}>创建时间：{order_createtime?moment(order_createtime).format('YYYY-MM-DD HH:mm:ss'):''}</Col>
                            <Col span={6}>支付时间：{order_payment?moment(order_payment).format('YYYY-MM-DD HH:mm:ss'):''}</Col>
                            <Col offset={6} span={6} style={{color: '#272727', fontSize: '16px'}}>订单总额：<span
                                style={{marginLeft: '20px'}}>￥{order_totalPrice}</span></Col>
                        </Row>
                        <Row style={{marginTop: '10px', fontSize: '14px'}}>
                            <Col offset={1}
                                 span={5}>发货日期：{ order_deliver?moment(order_deliver).format("YYYY-MM-DD HH:mm:ss"):''}</Col>
                        </Row>
                    </div>
                    <Row>
                        <Col span={1} style={{
                            height: '35px',
                            textAlign: 'center',
                            color: '#1890FF',
                            borderBottom: '2px solid #1890FF'
                        }}>详情</Col>
                    </Row>
                </div>
                <div style={{margin: '24px 16px', background: '#fff'}}>
                    <Row className="progress">
                        流程进度
                    </Row>
                    <Row className="stepContainer">
                        <Steps progressDot current={Number(order_status)-1}>
                            <Step title="待支付"/>
                            <Step title="待接单"/>
                            <Step title="已接单"/>
                            <Step title="待发货"/>
                            <Step title="已发货"/>
                            <Step title="已完成"/>
                            <Step title="已取消"/>
                        </Steps>
                    </Row>
                </div>
                <div style={{margin: '24px 16px', background: '#fff'}}>
                    <Row className="progress" style={{fontSize: '18px', color: '#272727'}}>
                        收货人信息
                    </Row>
                    <Row className="orderTakers">
                        <Col span={24} style={{paddingBottom: 20}}>收货人姓名：<span>{order_nickname}</span></Col>
                        <Col span={7}>
                            联系电话：<span>{order_phone}</span>
                            <img src={edit}
                                 alt={''}
                                 className={'eidtImg'}
                                 onClick={() => this.handleEdit(1)}/>
                        </Col>
                        <Col span={17}>联系地址：<span>{order_province} / {order_city} / {order_area} / {order_address}</span></Col>
                    </Row>
                </div>
                <div style={{margin: '24px 16px', background: '#fff'}}>
                    <Row className="progress" style={{fontSize: '18px', color: '#272727'}}>
                        订单信息
                    </Row>
                    <Row className="orderTakers">
                        <Col span={7}>用户备注：<span>{order_remark}</span></Col>
                        <Col span={17}>送达时间：<span>{order_receipt?moment(order_receipt).format("YYYY-MM-DD HH:mm:ss"):''}</span></Col>
                        <Col span={24} style={{paddingTop: 20}}>
                            商家备注：<span>{order_shopRemark}</span>
                            <img src={edit} alt={''} className={'eidtImg'} onClick={() => this.handleEdit(2)}/>
                        </Col>
                    </Row>
                </div>
                <div style={{margin: '24px 16px', background: '#fff'}}>
                    <Row className="progress" style={{fontSize: '18px', color: '#272727'}}>
                        配货信息
                    </Row>
                    <Row style={{paddingLeft: '24px', paddingRight: '24px', paddingBottom: '40px'}}>
                        <Table
                            columns={this.columns}
                            dataSource={goodsList}
                            rowKey={(record, index) => index}
                            pagination={false}
                            loading={this.state.loading}
                        />
                    </Row>
                </div>

                <Modal visible={this.state.visible}
                       maskClosable={false}
                       title="编辑"
                       okText={"提交"}
                       width={'500px'}
                       cancelText={"返回"}
                       onCancel={() => this.showModal(false)}
                       onOk={(e) => this.handleSubmit(e)}
                >
                    {
                        this.state.type === 1 ?
                            <FormItem label={"联系电话"} style={{display: 'flex'}} {...this.formItemLayout}>
                                {getFieldDecorator('phone', {
                                    rules: [{required: true, message: '请输入联系电话'}],
                                })(
                                    <Input
                                        placeholder="请输入联系电话" style={{width: '200px'}}/>
                                )}
                            </FormItem> :
                            <FormItem label={"商家备注"} style={{display: 'flex'}} {...this.formItemLayout}>
                                {getFieldDecorator('remark', {
                                    rules: [{required: true, message: '请输入商家备注'}],
                                })(
                                    <Input
                                        placeholder="请输入商家备注" style={{width: '200px'}}/>
                                )}
                            </FormItem>
                    }
                </Modal>
            </div>
        )
    };

    componentDidMount() {
        let id = this.props.match.params.id;
        const param={
            page:1,
            size:10,
            order_id:id
        };
        this.handleGetDetailById(param);
    };

    /**
     * 根据订单id获取订单详情
     */
    handleGetDetailById(param) {
        app.post(order.SEARCH_ORDER_ONE, param).then((result) => {
            if (result.code === 1) {
                const data=result.data[0];
                const goodsList=result.goodsList;
                this.setState({data,goodsList});
                console.log(result.data);
            } else {
                app.alert(result.msg,'info',1);
            }
        })
    }

    //弹出关闭添加框
    showModal(visible) {
        this.setState({visible: visible});
    }

    //提交添加账户
    handleSubmit(e) {
        e.preventDefault();
        let _this = this;
        const {type} = this.state;
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let url = '';
                if (type === 1) {
                    url = '11';
                } else if (type === 2) {
                    url = '22';
                } else {
                    app.alert('无法识别的类型', 'success', 1);
                }
                app.post(url, values).then((req) => {
                    if (req.code == 1) {
                        app.alert("成功添加", 'success', 2);
                    } else {
                        app.alert(req.msg, 'error', 2);
                    }
                })
            }
        })
    }

    /**
     * 处理编辑事件
     * @param type
     */
    handleEdit(type) {
        this.setState({type, visible: true});
    }

    /**
     * 处理打印事件
     */
    handlePrint() {
        this.props.history.push()
    }

};


const OrderDetails = Form.create()(orderDetail);
export default OrderDetails;